.panel {
    height: 150px;
    /* 注意：必须的有边框。才能设置边框背景 */
    border: 20px solid red;
    /* 注意：边框的宽一般和边框背景图片需要用到的宽一致 */
    border-width: 50px 37px 20px 127px;
    /* 内减模型：为了保证盒子的大小不变 */
    box-sizing: border-box;
    /* 边框背景图片 */
    border-image: url(../images/border.png) 50 37 20 127/50px 37px 20px 127px stretch;
    position: relative;
}

.inner {
    position: absolute;
    top: -50px;
    right: -37px;
    bottom: -20px;
    left: -127px;
    padding: 20px 30px;
}

.red {
    color: #ed3f35;
}

.blue {
    color: #006cff;
}

.turquoise {
    color: #6acca3;
}

.cyan {
    color: #3eccdc;
}

.yellow {
    color: #eacf19;
}

body {
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;
}

.container {
    /* 最小的高度：高度有内容撑开，如果内容不够700 以700为准 */
    min-height: 700px;
    /* 版心设置一个最大的宽度 */
    max-width: 1920px;
    /* 版心设置一个最小的宽度 */
    min-width: 1380px;
    /* 版心居中 */
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat;
    background-size: contain;
    /* 弹性布局 */
    display: flex;
    padding: 88px 20px 20px 20px;
}

/* 1.第一列 */

.container .column:nth-child(1) {
    flex: 3;
}

/* 1.1 数据概述 */

.overvoew {
    height: 108px;
}

.overvoew .item {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
}

.overvoew .item p {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
}

.overvoew .item span {
    color: #006cff;
    font-size: 12px;
}

/* 1.2 故障设备监控 */

.monitor {
    height: 475px;
    margin-top: 20px;
}

/* 页签 */

.monitor .tabs {
    height: 24px;
}

.monitor .tabs a {
    color: #006cff;
    font-size: 18px;
}

.monitor .tabs a.active {
    color: white;
}

.monitor .tabs a:nth-child(1) {
    border-right: 2px solid #6acca3;
    padding-right: 24px;
    margin-right: 24px;
}

/* 页面一 */

.monitor .content .head {
    background: rgba(255, 255, 255, 0.1);
    height: 38px;
    line-height: 38px;
    margin-left: -30px;
    margin-right: -30px;
    color: #3eccdc;
    padding: 0 30px;
    margin-top: 24px;
}

.monitor .content .head span {
    width: 25%;
    float: left;
}

.monitor .content .head span:nth-child(2) {
    width: 50%;
}

.monitor .content .head span:nth-child(3) {
    padding-left: 10px;
}

/* 页面轮播图 */

.monitor .content .carousel {
    height: 350px;
    margin-left: -30px;
    margin-right: -30px;
    overflow: hidden;
    position: relative;
}

.monitor .content .carousel ul {
    position: absolute;
    top: 0;
    left: 0;
}

.monitor .content .carousel li {
    height: 35px;
    line-height: 35px;
    color: #5696e5;
    padding-left: 30px;
    padding-right: 30px;
}

.monitor .content .carousel li span {
    width: 25%;
    float: left;
}

.monitor .content .carousel li span:nth-child(2) {
    width: 50%;
    /* 超出显示省略号 */
    /* 1.禁止自动换行 */
    white-space: nowrap;
    /* 2.超出隐藏 */
    overflow: hidden;
    /* 3.超出显示省略号 */
    text-overflow: ellipsis;
}

.monitor .content .carousel li span:nth-child(3) {
    padding-left: 10px;
}

.monitor .content .carousel li:hover {
    background: green;
}

/* 1.3 点位分布 */

.point {
    height: 335px;
    margin-top: 20px;
}
.point h3{
    color: white;
    font-size: 18px;
    font-weight: 400;
}
.point .echarts{
    height: 240px;
    margin-top: 20px;
}
.point .echarts .pie{
    width: 65%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}
.point .echarts .data{
    width: 35%;
    height: 100%;
    background: url(../images/rect.png) no-repeat;
    background-size: cover;
}
.point .echarts .data .item{
    height: 50%;
    padding-top: 32px;
    text-align: center;
}
.point .echarts .data .item p {
    color: white;
    font-size: 22px;
    margin-bottom: 11px;
}
.point .echarts .data .item span{
    color: #5696e5;
}

/* 2.第二列 */

.container .column:nth-child(2) {
    flex: 4;
    margin: 0 20px;
}
/* 2.1 设备数据统计 */
.map h3{
    color: white;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
}
.map h3 i{
    font-size: 20px;
    margin-right: 5px;
}
.map .echarts {
    height: 543px;
    background: rgba(255, 255, 255, 0.1);
}
.map .echarts .geo{
    height: 100%;
}
/* 2.2 全国用户总量统计 */
.user {
    height: 335px;
    margin-top: 20px;
}
.user h3{
    color: white;
    font-size: 18px;
    font-weight: 400;
}
.user .echarts{
    height: 240px;
    margin-top: 20px;
}
.user .echarts .bar{
    width: 70%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}
.user .echarts .data{
    width: 30%;
    height: 100%;
    background: url(../images/rect.png) no-repeat;
    background-size: cover;
}
.user .echarts .data .item{
    height: 50%;
    padding-top: 32px;
    text-align: center;
}
.user .echarts .data .item p {
    color: white;
    font-size: 22px;
    margin-bottom: 11px;
}
.user .echarts .data .item span{
    color: #5696e5;
}

/* 3.第三列 */

.container .column:nth-child(3) {
    flex: 3;
}
/* 3.1 订单量  */
.order {
    height: 145px;
}
.order .date{
    height: 20px;
    color: #006cff;
    line-height: 20px;
}
.order .date .active{
    color: white;
    font-size: 14px;
}
.order .date a{
    color: #006cff;
}
.order .date span{
    width: 2px;
    height: 12px;
    display: inline-block;
    background: #3eccdc;
    margin-left: 16px;
    margin-right: 16px;
}


.order .item {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    margin-top: 22px;
}
.order .item:nth-child(2){
    margin-left: 70px;
}
.order .item p {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
}

.order .item span {
    color: #006cff;
    font-size: 12px;
}



/* 3.2 销售额统计 */
.sale{
    height: 245px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.sale .sale_stat{
    color: #0a9dd3;
}
.sale .sale_stat h3{
    color: white;
    font-size: 18px;
    font-weight: normal;
    display: inline-block;
    border-right: 3px solid #00f2f1;
    padding-right: 20px;
}
.sale .sale_stat a{
    width: 25px;
    height: 25px;
    color: #0a9dd3;
    text-align: center;
    line-height: 25px;
    margin: 0 3px;
    font-size: 16px;
    display: inline-block;
    border-radius: 2px;
}
.sale .sale_stat a.active{
    background-color: #4c9bfd;
    color: white;
}
.sale .line_chart{
    margin-top: 10px;
    height: 170px;
    background: rgba(255, 255, 255, 0.1);
}



/* 3.3 渠道分布/一季度销售进度 */
/* 左边的 渠道分布 */
.container .left_channel{
    height: 229px;
    width: 48%;
}
.left_channel h3{
    color: white;
    font-size: 16px;
    font-weight: normal;
}
.left_channel .channel{
    height: 160px;
    width: 100%;
    margin-top: 20px;
}
.left_channel .channel li{
    color: white;
    height: 80px;
    float: left;
    margin-bottom: 10px;
}
.left_channel .channel li:nth-child(even){
    margin-left: 30px;
}
.left_channel .channel li p{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}
.left_channel .channel li p b{
    font-size: 14px;
    font-weight: normal;
    margin-left: 5px;
}
.left_channel .channel li span{
    color: #006cff;
}


/* 右边的 一季度销售进度 */
.container .right_channel{
    height: 229px;
    width: 48%;
}
.right_channel h3{
    color: white;
    font-size: 16px;
    font-weight: normal;
}
.right_channel .echarts .loop{
    height: 90px;
    margin-top: 17px;
    margin-bottom: 17px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}
.right_channel .echarts .data {
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-100%);
    
}
.right_channel .echarts .data b{
    font-size: 16px;
}
.right_channel .item{
    float: left;
}
.right_channel .item:nth-child(1){
    margin-right: 14px;
}
.right_channel .item p{
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}
.right_channel .item span{
    color: #006cff;
}

/* 3.4 全国热榜  */
.hot{
    height: 277px;
    margin-top: 20px;
}
/* 头部 */
.hot .hot_head{
    color: white;
}
.hot .hot_head h3{
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
.hot .hot_head h3:nth-child(2){
    margin-left: 40px;
}
.hot .hot_head h3:nth-child(3){
    margin-left: 85px;
    font-size: 14px;
    color: #006cff;
    font-style: italic;
}

/* 内容 */
.hot .ranking{
    height: 193px;
    display: flex;
    margin-top: 20px;
}
/* 热榜 第一列 */
.hot .ranking .ranking_one{
    flex: 4;
    color: #0a9dd3;
}
.hot .ranking .ranking_one p{
    height: 73px;
    font-size: 16px;
}
.hot .ranking .ranking_one p i{
    font-size: 30px;
    margin-right: 10px;
    vertical-align: middle;
}

/* 热榜 第二列 */
.hot .ranking .ranking_two{
    flex: 4;
    color: #5696e5;
}
.hot .ranking .ranking_two li{
    height: 33px;
    line-height: 33px;
}
.hot .ranking .ranking_two li span:nth-child(1){
    margin-right: 25px;
}
.hot .ranking .ranking_two li.active{
    background: rgba(255, 255, 255, 0.1);
    color: #a3c6df;
}
/* 热榜 第三列  */
.hot .ranking .ranking_three{
    flex: 4;
    color: #3eccdc;
    background: rgba(255, 255, 255, 0.1);
}
.hot .ranking .ranking_three li{
    height: 33px;
    line-height: 33px;
    padding-left: 10px;
}
.hot .ranking .ranking_three  #bx{
    margin-right: 24px;
}
.hot .ranking .ranking_three li span:nth-child(1){
    margin-right: 12px;
}